<template>
	<!-- 论坛 -->
	<view class="page-two-list">
		<!-- 广告位 -->
		<view class="advertising">
			<swiper class="ad-swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item, index) in advertising" :key="index">
					<image :src="item" mode="widthFix" style="width: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="page-two-main">
			<!-- 搜索框 -->
			<view class="filter-bar">
				<view class="filter-bar-right" style="margin-left: 0;" :class="{ 'filter-bar-right-focus': isFocus }">
					<input class="filter-input" placeholder="请输入搜索内容" v-model="searchQuery" @confirm="searchConfirm" @focus="handleFocus" @blur="handleBlur" />
					<image class="search-icon" src="/static/images/search_icon.png" mode="widthFix"></image>
				</view>
			</view>

			<!-- 筛选按钮组 -->
			<view class="filter-buttons">
				<view v-for="(item, index) in pupItemData" :key="index" class="filter-button"
					:class="{ 'filter-button-active': selectedFilter === item.text }" @click="selectFilter(item.text)">
					{{ item.text }}
				</view>
			</view>

			<!-- 下拉刷新容器 -->
			<scroll-view 
				class="scroll-container" 
				scroll-y="true" 
				refresher-enabled="true"
				:refresher-triggered="refreshing"
				@refresherrefresh="onRefresh"
				@scrolltolower="onLoadMore"
			>
				<!-- 添加加载动画 -->
				<uni-load-more v-if="loading && pageNum === 1" status="loading"></uni-load-more>
				
				<view v-if="!loading && ltData.length > 0" class="content">
					<lun-tan :ltData="ltData" :isLtList='true' :ltguid=guid
						@refresh="getLt"></lun-tan>
				</view>
				
				<!-- 暂无数据显示 -->
				<view class="zwxx-img" v-if="!loading && ltData.length === 0 && pageNum === 1">
					<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/zwxx.png" mode="widthFix"></image>
					<view>暂无数据</view>
				</view>
				
				<!-- 加载更多状态 -->
				<uni-load-more 
					v-if="ltData.length > 0" 
					:status="loadMoreStatus"
					:content-text="loadMoreText"
				></uni-load-more>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import LunTan from '../../components/LunTan.vue'; // 论坛
	export default {
		components: {
			LunTan
		},
		data() {
			return {
				guid: '',
				advertising: [],
				pupItemData: [{
					text: '全部'
				}, {
					text: '产品资源'
				}, {
					text: '人脉资源'
				}, {
					text: '行业服务'
				}, {
					text: '培训资源'
				}], // 服务
				searchQuery: '', // 搜索内容
				selectedFilter: '全部', // 筛选默认全部
				ltData: [],
				originalLtData: [], // 保存原始数据
				loading: false, // 加载状态
				refreshing: false, // 下拉刷新状态
				// 分页相关
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页数据量
				hasMore: true, // 是否还有更多数据
				loadMoreStatus: 'more', // 加载更多状态：more-加载前、loading-加载中、noMore-没有更多了
				// 搜索相关
				searchTimer: null, // 搜索防抖定时器
				isSearching: false, // 是否正在搜索
				isFocus: false // 搜索框聚焦状态
			}
		},
		computed: {
			loadMoreText() {
				return {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad(param) {
			console.log(param)
			if (param && param.guid) {
				this.guid = param.guid
			}
			this.getLt() // 获取论坛信息列表
			this.getBannerList() // 获取广告位
		},
		methods: {
			// 获取广告位
			async getBannerList() {
				const res = await this.$api.getBannerList()
				if (res.succ) {
					// 查找zsggw等于"论坛"的项
					const targetBanner = res.data.find(item => item.zsggw === '论坛')
					// 如果找到匹配项，则使用其tpList值，否则保持默认值
					this.advertising = targetBanner ? targetBanner.tpList : ['https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/banner1.png']
				}
			},
			// 获取论坛信息列表
			async getLt(isLoadMore = false) {
				if (isLoadMore) {
					this.loadMoreStatus = 'loading'
				} else {
					this.loading = true
				}
				
				try {
					let data = {
						releaseStatus: '展示中',
						words: this.searchQuery || '', // 搜索关键词
						pageNum: this.pageNum,
						pageSize: this.pageSize
					}
					
					// 添加筛选条件
					if (this.selectedFilter !== '全部') {
						data.releaseLabel = this.selectedFilter
					}
					
					const res = await this.$api.getltList(data)
					if (res.succ) {
						const newData = res.data
						
						if (isLoadMore) {
							// 加载更多：追加数据
							this.ltData = [...this.ltData, ...newData]
						} else {
							// 首次加载或刷新：替换数据
							this.ltData = newData
						}
						
						// 判断是否还有更多数据
						this.hasMore = newData.length === this.pageSize
						this.loadMoreStatus = this.hasMore ? 'more' : 'noMore'
					}
				} catch (error) {
					console.error('获取论坛列表失败:', error)
					// 显示错误提示
					uni.showToast({
						title: '获取数据失败',
						icon: 'none',
						duration: 2000
					})
					this.loadMoreStatus = 'more'
				} finally {
					// 无论成功还是失败，都要关闭加载状态
					this.loading = false
					this.refreshing = false
				}
			},
			
			// 下拉刷新
			async onRefresh() {
				this.refreshing = true
				this.pageNum = 1
				this.hasMore = true
				this.loadMoreStatus = 'more'
				await this.getLt()
			},
			
			// 加载更多
			async onLoadMore() {
				if (!this.hasMore || this.loadMoreStatus === 'loading') {
					return
				}
				
				this.pageNum++
				await this.getLt(true)
			},
			
			// 选择筛选条件
			selectFilter(filter) {
				this.selectedFilter = filter;
				this.performSearch();
			},
			
			// 搜索确认
			searchConfirm() {
				this.performSearch();
			},
			
			// 搜索处理（带防抖）
			handleSearch() {
				// 清除之前的定时器
				if (this.searchTimer) {
					clearTimeout(this.searchTimer)
				}
				
				// 设置新的定时器，500ms后执行搜索
				this.searchTimer = setTimeout(() => {
					this.performSearch()
				}, 500)
			},
			
			// 执行搜索
			async performSearch() {
				if (this.isSearching) return
				
				this.isSearching = true
				this.pageNum = 1
				this.hasMore = true
				this.loadMoreStatus = 'more'
				this.ltData = [] // 清空当前数据
				
				await this.getLt()
				this.isSearching = false
			},
			
			// 搜索框聚焦
			handleFocus() {
				this.isFocus = true;
			},
			
			// 搜索框失焦
			handleBlur() {
				if (!this.searchQuery) {
					this.isFocus = false;
				}
			}
		}
	}
</script>

<style lang="less">
	.filter-buttons {
		display: flex;
		flex-wrap: wrap;
		margin-top: 0;
		padding: 10rpx 30rpx;
		justify-content: space-between;
	}

	.filter-button {
		width: calc(25% - 12rpx);
		padding: 15rpx 0;
		background: #FFEFD9;
		border-radius: 32rpx;
		font-size: 28rpx;
		color: #AC6C17;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		text-align: center;
		margin-bottom: 16rpx;

		&:active {
			transform: scale(0.98);
		}

		&.filter-button-active {
			background: linear-gradient(138deg, #F3B359 0%, #EC6A34 100%);
			color: #FFFFFF;
		}
	}

	.zwxx-img {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;

		image {
			width: 320rpx;
			margin-bottom: 20rpx;
		}

		view {
			color: #999;
			font-size: 28rpx;
		}
	}

	.scroll-container {
		width: 100%;
		flex: 1;
		overflow: auto;
	}

	.page-two-list {
		.advertising {
			margin: 30rpx 30rpx 0;
			padding: 0;
			border-radius: 12rpx;

			.ad-swiper {
				height: 300rpx;
				border-radius: 12rpx;
			}

			.ad-swiper swiper-item {
				width: 100%;
				height: 100%;
			}

			.ad-swiper swiper-item image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
	}
</style>